<template>
	<view class="">
		<!-- <view class="index-coupon">
			<view scroll-x="true" class="index-coupon-view">
				<view class="index-coupon-msg" v-for="(item,index ) in lists" :key="index">
					<view class="index-coupon-msg-msg" :class="activeTabIndex==index?'activeTab':''"
						@click="manuBtn(index)">
						{{item.tit}}
					</view>
				</view>
			</view>

		</view>
		<view class="" style="height: 130rpx;">

		</view> -->
		<view class="list">
			<view class="list-msg dis">
				<view class="list-msg-left" style="line-height: 50rpx;">
					<view class="list-msg-left-tit">{{pageDtata.optionName}}</view>
					<view class="list-msg-left-time">奖励对象：{{pageDtata.name}}</view>

					<view class="list-msg-left-time">积分：
						<text v-if="pageDtata.type==1">+</text>
						<text v-if="pageDtata.type==2">-</text>
						{{pageDtata.integral}}积分
					</view>
					<view class="list-msg-left-des">
						事项说明：{{pageDtata.reason}}</view>
					<view class="list-msg-left-img">
						<image v-for="(item,index) in pageDtata.file" :src="item" mode=""></image>
					</view>
					<view class="list-msg-left-time">奖励时间：{{pageDtata.createTime}}</view>
				</view>
				<!-- <view class="list-msg-right">

					<image class="list-msg-right-img" src="../../static/com/icon_more.png" mode="scaleToFill"></image>
				</view> -->
				<!-- {{index+1}}、村民公约标题村民公约标题村民公约标题村民公约标题村民公约标题村民公约标题村民公约标题村民公约标题村民公约标题村民公约标题村民公约标题 -->
			</view>
		</view>
		<home></home>
	</view>
</template>

<script>
	import home from '@/components/home/index.vue'
	import {
		getIntegralDetail,
		getPubDetail
	} from '@/api/togeterRich/family.js'

	export default {
		components:{
			home
		},
		data() {
			return {
				lists: [{
						tit: "全部",
						num: 0
					},
					{
						tit: "增加",
						num: 1
					},
					{
						tit: "减少",
						num: 2
					}
				],
				activeTabIndex: 0,
				recordId: '',
				pageDtata: {},
				type: null,
				id: ''
			}
		},
		onLoad(e) {
			this.type = e.type
			this.id = e.id
			this.recordId = e.recordId
			if (this.type == 1) {

				this.jfInfo()
			} else {
				this.init()

			}

		},
		methods: {
			jfInfo() {
				let data = {
					id: this.id
				}
				getPubDetail(data).then(res => {

					this.pageDtata = res.data
				})
			},
			init() {
				let data = {
					recordId: this.recordId
				}
				getIntegralDetail(data).then(res => {
					this.pageDtata = res.data
					// console.log(res, 'dddd')
				})
			},
			goPage() {
				uni.navigateTo({
					url: `/pagesA/family/comopornents/integralInfo`
				})
			},
			manuBtn(index) {
				this.activeTabIndex = index
			}
		}
	}
</script>

<style lang="scss" scoped>
	.list {
		width: 100%;
		background: #fff;

		.list-msg {
			.list-msg-right {
				display: flex;
				align-items: center;

				.list-msg-right-img {
					width: 40rpx;
					height: 40rpx;
					margin-left: 20rpx;
					vertical-align: middle;
				}
			}

			.list-msg-left {
				.list-msg-left-img {
					display: flex;
					flex-wrap: wrap;

					image {
						width: 217rpx;
						height: 217rpx;
						margin: 5rpx;
						border-radius: 20rpx;
					}



				}

				.list-msg-left-des {
					font-size: 24rpx;
					color: #000;
				}

				.list-msg-left-tit {
					color: #333;

					font-size: 28rpx;

				}

				.list-msg-left-time {
					font-size: 24rpx;
					color: #999;
				}
			}

			justify-content: space-between;
			width: 90%;

			padding: 20rpx 0;
			margin: 20rpx auto;
			border-bottom: 1rpx solid #f5f5f5;

			text-overflow: ellipsis;
			// padding: 30rpx;/
		}
	}

	.activeTab {
		border-bottom: 4rpx solid $maincolor;
		color: $maincolor;
	}

	.index-coupon {
		position: fixed;
		top: 0;
		width: 100%;
		padding: 13px 20rpx;
		border-radius: 10rpx;

		background: #fff;
		display: flex;
		justify-content: space-between;
		align-items: baseline;


		.index-coupon-view {

			padding: 15rpx 0;

			display: flex;
			margin: 0 auto;
			justify-content: space-around;
			width: 80%;

			.index-coupon-msg {
				.index-coupon-msg-msg {
					color: $maincolor;
					padding: 8rpx 0;
					color: #000;

				}

				opacity: 1;
				margin-right: 50rpx;
			}
		}


	}
</style>